import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, DatePicker } from 'antd';
import { DICT } from '../enum';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { getQueryString } from '@/utils/util';
import moment from 'moment';

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  handleExport: Function,
  dict?: any,
  deviceWisdomElectricityLogCond?: any
}

const FormItem = Form.Item;
const ONE_PAGE_SIZE = 10;

@connect(({ analyse_device }) => ({
  dict: analyse_device.dict,
  deviceWisdomElectricityLogCond: analyse_device.deviceWisdomElectricityLogCond
}))
class Search extends Component<Props, any> {

  state = {
    deviceId: getQueryString('id'),
    createTimeStart: '',
    createTimeEnd: '',
    endOpen: false
  };

  disabledStartDate = (createTimeStart) => {
    const createTimeEnd = this.state.createTimeEnd;
    if (!createTimeStart || !createTimeEnd) {
      return false;
    }
    return createTimeStart.valueOf() > createTimeEnd.valueOf();
  };

  disabledEndDate = (createTimeEnd) => {
    const createTimeStart = this.state.createTimeStart;
    if (!createTimeEnd || !createTimeStart) {
      return false;
    }
    return createTimeEnd.valueOf() <= createTimeStart.valueOf();
  };

  onChange = (field, value) => {
    this.setState({
      [field]: value,
    });
  };

  onStartChange = (value) => {
    this.onChange('createTimeStart', value);
  };

  onEndChange = (value) => {
    this.onChange('createTimeEnd', value);
  };

  handleStartOpenChange = (open) => {
    if (!open) {
      this.setState({ endOpen: true });
    }
  };

  handleEndOpenChange = (open) => {
    this.setState({ endOpen: open });
  };

  componentDidMount() {
    const { dispatch, deviceWisdomElectricityLogCond } = this.props;
    if (deviceWisdomElectricityLogCond) {
      this.setState({
        createTimeStart: deviceWisdomElectricityLogCond.createTimeStart,
        createTimeEnd: deviceWisdomElectricityLogCond.createTimeEnd
      })
    }
    dispatch({
      type: 'analyse_device/queryDict',
      payload: { keyList: DICT }
    });
  }

  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    dispatch({
      type: 'analyse_device/updateDeviceWisdomElectricityLogCond',
      payload: {
        pageNum: 1,
        pageSize: ONE_PAGE_SIZE,
        deviceId: this.state.deviceId,
        sort: '-createTime',
        createTimeStart: moment(this.state.createTimeStart).format('YYYY-MM-DD HH:mm:ss'),
        createTimeEnd: moment(this.state.createTimeEnd).format('YYYY-MM-DD HH:mm:ss')
      }
    });
    this.props.initCurrent()
  };

  changeExport = () => {
    this.props.handleExport();
  };

  render() {
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={1} span={16}>
            <FormItem
              label="接收时间"
              {...formItemLayout}
            >
              <DatePicker
                disabledDate={this.disabledStartDate}
                showTime
                value={this.state.createTimeStart ? moment(this.state.createTimeStart) : null}
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="Start"
                onChange={this.onStartChange}
                onOpenChange={this.handleStartOpenChange}
              />
              <span style={{ 'marginLeft': '10px' }}></span>
              <DatePicker
                disabledDate={this.disabledEndDate}
                showTime
                format="YYYY-MM-DD HH:mm:ss"
                value={this.state.createTimeEnd ? moment(this.state.createTimeEnd) : null}
                placeholder="End"
                onChange={this.onEndChange}
                open={this.state.endOpen}
                onOpenChange={this.handleEndOpenChange}
              />
            </FormItem>
          </SearchCol>
          <SearchCol key={2}>
            <SearchButton htmlType="submit">搜索</SearchButton>
            <SearchButton onClick={() => {
              this.setState({
                createTimeEnd: '',
                createTimeStart: ''
              });
            }} style={{ 'marginLeft': '15px' }}>重置</SearchButton>
            <SearchButton style={{ 'marginLeft': '15px' }} onClick={this.changeExport}>导出</SearchButton>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create()(Search);
export default SearchS;
